<template>
  <div>
    <brack :params1="'权限管理'" :params2="'角色列表'"></brack>
    <el-card class="box-card">
      <el-button type="primary" class="btn">添加角色</el-button>
      <!-- 表单区域 -->
      <template>
        <el-table :data="tableData" style="width: 100%" border="">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form
                label-position="left"
                inline
                class="demo-table-expand day1"
              >
                <!-- 一层循环 -->
                <el-row
                  v-for="(item1, index1) in scope.row.children"
                  :key="index1"
                  class="day1"
                >
                  <el-col :span="8">
                    <el-tag
                      v-for="tag in tags"
                      :key="tag.name"
                      :data="tags"
                      closable
                      :type="tag.type"
                      @click="open(scope.row.id, item1.id, scope.row)"
                    >
                      {{ item1.authName }}
                    </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 二层循环 -->
                  <el-col :span="16">
                    <el-row
                      v-for="(item2, index2) in item1.children"
                      :key="index2"
                      class="day2"
                    >
                      <el-col :span="8">
                        <el-tag
                          v-for="tag in tags1"
                          :key="tag.name"
                          :data="tags1"
                          closable
                          :type="tag.type"
                          @click="open(scope.row.id, item2.id, scope.row)"
                        >
                          {{ item2.authName }}
                        </el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-col>
                      <el-col :span="16">
                        <!-- 三层循环 -->
                        <el-row
                          v-for="(item3, index3) in item2.children"
                          :key="index3"
                          class="day3"
                        >
                          <el-tag
                            v-for="tag in tags2"
                            :key="tag.name"
                            :data="tags2"
                            closable
                            :type="tag.type"
                            @click="open(scope.row.id, item3.id, scope.row)"
                          >
                            {{ item3.authName }}
                          </el-tag>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="#" prop="id" width="50px"> </el-table-column>
          <el-table-column label="角色名称" prop="roleName"> </el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
          <el-table-column label="操作" prop="roleName">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                >编辑</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              ><el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="btnrolse(scope.row)"
                >分配权限 {{ scope.row.id }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <!-- 树形图组件 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-tree
        ref="tree"
        :data="roleslist"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="defaultArr"
        :props="defaultProps"
        :default-expand-all="true"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addroles">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  roles_api,
  remove_api,
  rolesUser_api,
  rights_api,
 
} from "@/api";
export default {
  data() {
    return {
      objlist: {
        id: "",
        rid: []
      },
      tableData: [],
      roleslist: [],
      dialogVisible: false,
      roles: {},
      roleId: "",
      defaultArr: [105],
      tags: [{ name: "标签一", type: "" }],
      tags1: [{ name: "标签一", type: "success" }],
      tags2: [{ name: "标签一", type: "warning" }],
      defaultProps: {
        children: "children",
        label: "authName"
      }
    };
  },
  created() {
    this.adduser();
  },
  methods: {
    //获取数据
    async adduser() {
      const { data: res } = await roles_api();
      //  console.log(res);
      this.tableData = res.data;
    },
    //点击删除指定角色权限
    open(a, b, rows) {
      this.roles.roleId = a;
      this.roles.rightId = b;
      console.log(rows);
      // this.roles.roleId=row.id
      // this.roles.rightId = row.children.
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: res } = await remove_api(this.roles);
          rows.children = res.data;

          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //点击显示树形图
    async btnrolse(row) {
      this.dialogVisible = true;
      console.log(row.id);
      // this.roleId = row.id;
      this.objlist.id = row.id;
      this.roleId = row.id;
      console.log(this.objlist);

      this.defaultArr = [];

      const { data: res } = await rights_api("tree");
      console.log(res.data);
      this.roleslist = res.data;
      this.argumTree(row, this.defaultArr);
    },
    argumTree(row, arr) {
      if (!row.children) {
        return arr.push(row.id);
      }
      //有children
      row.children.forEach(item => {
        this.argumTree(item, arr);
      });
    },
    async addroles() {
      var rids = [];
      // console.log(this.$refs.tree.getCheckedKeys(), 1111);
      // console.log(this.$refs.tree.getHalfCheckedKeys(), 22222);
      rids = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ].join();
      // console.log(this.roleId);
      // console.log(rids);
      // this.objlist.id = this.roleId;

      this.objlist.rid = rids;
      console.log(this.objlist);
      console.log(this.objlist.id);

      const { data: res } = await rolesUser_api({ roleId: this.roleId, rids });
      this.dialogVisible = false;
      // console.log(res);
      if (res.meta.status == 200) {
        this.$message({
          type: "success",
          message: "权限更新成功!"
        });
      } else {
        this.$message({
          type: "success",
          message: "权限更新失败!"
        });
      }
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
<style scoped lang="less">
.el-card {
  margin-top: 20px;
  .btn {
    margin-bottom: 15px;
  }
  .day1 {
    // border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 10px;
    .el-button {
      margin: 10px;
    }
    .day2 {
      border-top: 1px solid #eee;
      // border-bottom: 1px solid #eee;
      padding: 10px;
    }
    &:last-child(1) {
      border-bottom: none;
    }
    .day3 {
      border-top: 1px solid #eee;
      // border-bottom: 1px solid #eee;
      // margin: 10px;
      padding: 10px;
    }
    &:nth-child(1) {
      border-top: none;
    }
  }
}
</style>
